<template>
  <div class="filter-more">
    <div class="from_header">
      <el-form ref="form" label-width="120px">
        <el-form-item label="订单编号：">
          <el-input v-model="searchInfo.orgerId" size="small" placeholder="请输入订单编号"/>
        </el-form-item>
        <el-form-item label="内部编号：">
          <el-input v-model="searchInfo.insideCode" size="small" placeholder="请输入内部编号"/>
        </el-form-item>
        <el-form-item label="客户：">
          <el-input v-model="searchInfo.customer" size="small" placeholder="请输入客户"/>
        </el-form-item>
        <el-form-item label="订单状态：" prop="status">
          <el-select v-model="searchInfo.status" clearable placeholder="订单状态">
            <el-option
              v-for="item in statusList"
              :key="item.id"
              :label="item.name"
              :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="交货日期：">
          <el-date-picker
            v-model="searchInfo.valueDtStart"
            type="date"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="changeTimeStart"
          />
          </el-form-item>
      </el-form>
      <!-- <el-form ref="form" label-width="120px">
        <el-form-item label="记录状态：" prop="status">
          <el-select v-model="searchInfo.deleteFlag" clearable placeholder="请选择记录状态">
            <el-option
              v-for="item in delectList"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="状态：" prop="status">
          <el-select v-model="searchInfo.status" clearable placeholder="请选择状态">
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
      </el-form> -->

      <div v-if="isRouter" class="establish">
        <el-button type="primary" size="small" @click="importFile">导入</el-button>
        <el-button type="primary" size="small" @click="newly">新增</el-button>
        <el-button type="primary" size="small" @click="selected">查询</el-button>
        <el-button plain size="small" @click="reset">重置</el-button>
      </div>
    </div>
  </div>
</template>

<script>
// import { Message } from 'element-ui';
import user from '../../api/acl/user.js'
export default {
  model: {
    prop: 'searchInfo'
  },
  props: {
  },
  data() {
    return {
      isRouter: !(window.sessionStorage.getItem('department') == 8 || window.sessionStorage.getItem('department') == 10),
      statusList: [
      ],
      delectList: [
        {
          value: '0',
          label: '正常'
        },
        {
          value: '1',
          label: '删除'
        }
      ],
      searchInfo: {
        orgerId: '',
        insideCode: '',
        deleteFlag: '',
        status: '',
        valueDtStart:[],
        customer: '',
        startDate: '',
        endDate: ''
      }
    }
  },
  mounted() {
    this.listOrderStatus()
  },

  changeTimeStart(val) {
    console.log(val)
    this.searchInfo.startDate = val.length > 0 ? val[0] : ''
    this.searchInfo.endDate = val.length > 0 ? val[1] : ''
  },
  methods: {
    listOrderStatus() {
      user.listOrderStatus({
      }).then((response) => {
        this.statusList = response
      })
    },
    selected() {
      this.$emit('selected', this.searchInfo)
    },
    // 重置
    reset() {
      this.searchInfo = {
        orgerId: '',
        insideCode: '',
        deleteFlag: '',
        status: '',
        customer: '',
        startDate: '',
        endDate: ''
      }
      this.selected()
    },
    // 新增弹框
    newly() {
      this.$emit('add')
    },
    importFile() {
      this.$emit('importFile')
    }
  }
}
</script>

<style scoped lang="scss">
.filter-more {
  // width: 90%;
  // margin: 0 auto;
  display: flex;
  flex-direction: column;
  // background: #ccc;
  // border: 1px solid #e8f4fd;
  // padding: 25px 15px;
  .from_header {
    width: 100%;
    height: 100%;

    .el-form-item {
      margin: 10px 30px;
    }

    .el-form {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }
    /deep/ .el-form-item__content {
      display: flex;
    }
  }
  .establish {
    float: right;
  }
}
</style>
